import React from 'react'
import './zj.css'
import { useHistory } from 'react-router-dom';

export default ({ datalist }) => {
  // 可以跳转的路由
  const history = useHistory();

  const dataGeshihua = (playCounts) => {
    return Math.floor(playCounts / 10000)
  }

  const dataLists = () => {
    return datalist.map((val, i) => {
      return <div className="enc-items" key={i} onClick={() => {
        // 点击挑战到歌单页面
        history.push({
          pathname: '/songSheetDetail',
          query: { id: val.id }
        })
      }}>
        <div className="enc-liem-warp">
          <div className="enc-img-warp">
            <img src={val.coverImgUrl} alt={val.alg} />
          </div>
          <span className="enc-icon-txt">
            <i className="iconfont icon-bofang"></i>{dataGeshihua(val.playCount)}万
        </span>
        </div>
        <p className="enc-item-txt">{val.name}</p>
      </div>
    })
  }

  return <>
    <div className="dataLists-items" >
      {dataLists()}
    </div>
  </>
}